<template>
  <div class="box">
    <topLogin :isIndex="false"></topLogin>
    <topNav :isActive="-1"></topNav>
    <div class="wid-1200 min-height">
        <Breadcrumb separator=">">
        <BreadcrumbItem>当前位置</BreadcrumbItem>
        <BreadcrumbItem>视频展播列表</BreadcrumbItem>
      </Breadcrumb>
      <div class="title-box">
        <p>视频展播</p>
      </div>
      <ul class="video-list-box">
        <li>
            <video src="//s3.pstatp.com/aweme/resource/web/static/image/index/tvc-v3_0b9db49.mp4"></video>
        </li>
         <li>
            <video src="//s3.pstatp.com/aweme/resource/web/static/image/index/tvc-v3_0b9db49.mp4"></video>
        </li>
         <li>
            <video src="//s3.pstatp.com/aweme/resource/web/static/image/index/tvc-v3_0b9db49.mp4"></video>
        </li>
         <li>
            <video src="//s3.pstatp.com/aweme/resource/web/static/image/index/tvc-v3_0b9db49.mp4"></video>
        </li>
         
      </ul>
    </div>
  </div>
</template>

<script>
import topNav from "@/components/topNav/index";
import footNav from "@/components/footNav/index";
import topLogin from "@/components/topLogin/index";
// 框架组件
import { Breadcrumb, BreadcrumbItem } from "view-design";
export default {
  name: "VideoList",
  components: {
    topNav,
    footNav,
    topLogin,
    Breadcrumb, 
    BreadcrumbItem
  },
  data() {
    return {};
  }
};
</script>

<style lang="scss" scoped>
.video-list-box {
  li {
    display: inline-block;
    position: relative;
    width: 285px;
    margin-right: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    &:nth-of-type(4n){
        margin-right:0;
    }
    >video{
        display: block;
        width:100%;
    }
  }
}
</style>